<template>
  <div class="c_recruit-detail">
    <el-breadcrumb separator=">" class="breadcrumb-box">
      <!-- <el-breadcrumb-item to="/index">{{$t('common.nav.home')}}</el-breadcrumb-item> -->
      <el-breadcrumb-item to="/c_recruit_list">{{$t('common.nav.recruit')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('recruit.JobDetail')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-box">
      <div class="sectiona">
        <div class="sectiona_box">
          <h2 class="left_name">{{resData.positionName}}</h2>
          <p class="sectiona_salary">{{resData.salaryRangeTxt || '0K'}}/{{$t('recruit.Month')}}</p>
          <div class="sectiona_btn">
            <a
              href="JavaScript:void(0)"
              @click="addCollect(resData.id,0)"
               v-if="resData.isCollected==0 || isLogin=='false'"
            >
              <img src="../../assets/images/collect.png" />
              {{$t('recruit.PositionCollection')}}
            </a>
            <a class="on" href="JavaScript:void(0)" @click="cancelCollect(resData.id,0)" v-else>
              <img src="../../assets/images/collect_current.png" />
              {{$t('recruit.Collected')}}
            </a>
            <a
              href="JavaScript:void(0)"
              @click="deliverResume(resData.id,0)"
            >{{$t('recruit.ResumeDelivery')}}</a>
          </div>
        </div>
        <p>
          <b>{{resData.enterpriseResources.enterpriseName || ''}}</b>
          <span v-if="resData.workplace!=''">{{resData.workplace}} |</span>
          {{resData.vacantTypeTxt}}
        </p>
        <el-breadcrumb separator="|" class="breadcrumb-box">
          <el-breadcrumb-item v-if="resData.workExperienceTxt!=''">{{resData.workExperienceTxt}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="resData.educationTxt!=''">{{resData.educationTxt}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="resData.recruitingNumbers!=''">{{$t('recruit.recruit_info')}}{{resData.recruitingNumbers}}{{$t('recruit.People')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <p v-if="resData.createTime">{{resData.createTime.substr(0,10)}}</p>
      </div>

      <div class="sectionb">
        <div class="sectionb_title">
          <span>{{$t('recruit.JobDetail')}}</span>
          <span></span>
        </div>
        <h3>{{$t('recruit.Duty')}}：</h3>
        <p>{{resData.positionStatement}}</p>
        <h3 class="mt40">{{$t('recruit.Appoint')}}：</h3>
        <p>{{resData.jobRequirements}}</p>
      </div>
      <div class="sectionb mt40">
        <div class="sectionb_title">
          <span>{{$t('recruit.Address')}}：</span>
          <span></span>
        </div>
        <p class="mt20 mb40"><i class="el-icon-location-information"></i>{{resData.workplace}}</p>
      </div>

      <div class="sectionb">
        <div class="sectionb_title">
          <span>{{$t('common.leftNav.companyInfo')}}：</span>
          <span></span>
        </div>
        <div class="sectiona_box">
          <h2 class="left_name">{{resData.enterpriseResources.enterpriseName}}</h2>
          <div class="sectiona_btn">
            <a :href="'#/vip/c_recruit_company_detail?id='+resData.enterpriseResources.id+'&backId='+resData.id" target="_blank">{{$t('recruit.QyDetail')}}</a>
          </div>
        </div>
        <el-breadcrumb separator="|" class="breadcrumb-box mb10">
          <el-breadcrumb-item v-if="resData.enterpriseResources.corporateTypeTxt!=''">{{resData.enterpriseResources.corporateTypeTxt}}</el-breadcrumb-item>
          <el-breadcrumb-item
            v-if="resData.enterpriseResources.lawPerson!=''"
          >{{$t('common.company.companyLegal')}}：{{resData.enterpriseResources.lawPerson}}</el-breadcrumb-item>
          <el-breadcrumb-item
            v-if="resData.enterpriseResources.staffNumberTxt!=''"
          >{{resData.enterpriseResources.staffNumberTxt}}{{$t('common.newJob.peoples')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <p class="last-p">{{$t('recruit.QyAddress')}}： {{resData.enterpriseResources.address}}</p>
        <p
          class="last-p"
          :key="index"
          v-for="(item,index) in resData.enterpriseResources.technologyDirectionList"
        >{{item.description}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { ajax, showToast, ajaxAdd, notBlankStr, jumpRout,ajaxBackAdd,isLoginM} from "@/utils/js.js";
import { getPositonDetail,deliverResume,addCollect,cancelCollect,getResumeJudge} from "@/services/api.js";
const log = console.log;

export default {
  data() {
    return {
      id: "",
      status: "",
      resData: {
        enterpriseResources:{
          enterpriseName:'',
        }
      },
      isLogin: "false",
      isPerson: true,
    };
  },
  mounted() {
    if (this.$store.state.userInfo) {
      this.isLogin = "true";
      if (this.$store.state.userInfo.type == 0) {
        this.isPerson = true;
      } else {
        this.isPerson = false;
      }
    }
    console.log(this.$route.query.id);
    this.id = this.$route.query.id;
    this.status = this.$route.query.status;

    this.content();
  },
  watch: {
    "$i18n.locale"() {
      this.content();
    },
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    navTo(url){
      jumpRout(this,url,{},(d)=>{})
    },
    content() {
      this.id = this.$route.query.id;
      ajax(this, getPositonDetail, { id: this.id }, (res) => {
        this.resData = res.data;
        this.status = res.flag;
      },err=>{});
    },
    canSubmit() {
      if (notBlankStr(this.input_zw) == false) {
        showToast(this, this.$t("common.newJob.inputJobTitle"));
        return false;
      }
      if (this.input_rs <= 0) {
        showToast(this, this.$t("common.newJob.inputPeopleCount"));
        return false;
      }
      if (this.input_lb == "") {
        showToast(this, this.$t("common.newJob.selectVacantType"));
        return false;
      }
      if (this.input_lx == "") {
        showToast(this, this.$t("common.newJob.selectWorkType"));
        return false;
      }
      if (this.input_price == "") {
        showToast(this, this.$t("common.newJob.selectSalary"));
        return false;
      }
      if (this.input_xl == "") {
        showToast(this, this.$t("common.newJob.selectEducation"));
        return false;
      }
      if (this.input_address.length == 0) {
        showToast(this, this.$t("common.newJob.selectAddress"));
        return false;
      }
      if (this.input_jy == "") {
        showToast(this, this.$t("common.newJob.selectExperience"));
        return false;
      }
      if (notBlankStr(this.positionStatement) == false) {
        showToast(this, this.$t("common.newJob.inputDuty"));
        return false;
      }
      if (notBlankStr(this.jobRequirements) == false) {
        showToast(this, this.$t("common.newJob.inputRequire"));
        return false;
      }
      return true;
    },

    postData() {
      let data = {
        corporateType: "",
        education: this.input_xl,
        educationTxt: "",
        enterpriseName: "",
        erId: "",
        id: this.id,
        industry: "",
        jobRequirements: this.jobRequirements,
        positionName: this.input_zw,
        positionStatement: this.positionStatement,
        recruitingNumbers: this.input_rs,
        releaseTime: "",
        salaryRange: this.input_price,
        salaryRangeTxt: "",
        statusTxt: "",
        vacantType: this.input_lb,
        workExperience: this.input_jy,
        workExperienceTxt: "",
        workType: this.input_lx,
        workTypeTxt: "",
        workplace: this.input_address[0] + this.input_address[1],
      };
      log(data);
      return data;
    },

    publishTap() {
      if (this.canSubmit()) {
        this.publishReq();
      }
    },
    //0 保存 1 发布 2下架
    publishReq() {
      let data = this.postData();
      data.status = "1";
      ajaxAdd(this, enterpriseNewJob, data, (res) => {
        this.$router.back(-1);
      });
    },
    addCollect(id, index) {
      if (this.isLogin == "false") {
        showToast(this, this.$t("login.login"), 0);
      } else {
        // 所属行业 corporateType
        ajaxAdd(
          this,
          addCollect,
          {
            jobId: id,
          },
          (res) => {
            showToast(this, res.msg, 1);
            this.resData.isCollected = 1;
          }
        );
      }
    },
    cancelCollect(id, index) {
      if (this.isLogin == "false") {
        showToast(this, this.$t("login.login"), 0);
      } else {
        isLoginM(this,()=>{
          ajaxBackAdd(this, cancelCollect,{jobId:id},(res) => {
              showToast(this,res.msg,1);
              this.jobList = this.jobList.filter( n=> n.id !=id)
            }
          );
        })
      }
    },
    deliverResume(id) {
      console.log(this.isLogin,this.$store.state.userInfo.type)
      if(this.isLogin=='false'){
          showToast(this,this.$t('common.login.goLogin'),0);
      }else{
        if (this.$store.state.userInfo.type && this.$store.state.userInfo.type != 0) {
          showToast(this, this.$t("recruit.QyResumeDeliveryTips"), 0);
          console.log('1111')
          return false;
        }
        this.resumeJudge(id);
      }
    },
    resumeJudge(id){
      isLoginM(this,()=>{
        ajax(this,getResumeJudge,{},(res) => {
          if(res.data){
            ajaxAdd(this,deliverResume,{jobId:id},(res) => {
              showToast(this, res.msg,1);
            },(err) => {

            });
          }else{
            this.$confirm(res.msg, this.$t('recruit.Tips'), {
              confirmButtonText: this.$t('recruit.GoPerfect'),
              cancelButtonText: this.$t('recruit.Cancel'),
              type: 'warning'
            }).then(() => {
                this.navTo("/vip/p_resume_edit");
            }).catch(() => {
            });
          }
        },(err) => {
          
        });
      })
      
    },
    saveTap() {
      if (this.canSubmit()) {
        this.saveReq();
      }
    },

    saveReq() {
      let data = this.postData();
      data.status = "0";
      ajaxAdd(this, enterpriseNewJob, data, (res) => {
        this.$router.back(-1);
      });
    },

    backTap() {
      this.$router.back(-1);
    },
  },
};
</script>
<style lang="scss">
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}

.c_recruit-detail {
  .el-breadcrumb__inner a, 
  .el-breadcrumb__inner.is-link{
    font-weight: 400; 
    color: #606266;
  }

  width: 1200px;
  box-sizing: border-box;
  margin: 10px auto;
  .breadcrumb-box > .el-breadcrumb__inner {
    font-size: 13px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 17px;
    color: rgba(153, 153, 153, 1);
  }

  .content-box {
    padding: 28px 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin-top: 10px;
    .sectiona {
      margin-bottom: 40px;
      .el-breadcrumb__inner {
        color: rgba(153, 153, 153, 1);
      }
    }
    .sectiona > .sectiona_box {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      h2 {
        font-size: 28px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 37px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
      }
      .sectiona_salary {
        font-size: 21px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 27px;
        color: rgba(255, 116, 82, 1);
        opacity: 1;
      }
      .sectiona_btn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(15, 84, 188, 1);
        opacity: 1;
        a:first-child.on{
          border: 1px solid rgba(15, 84, 188, 1);
          color: rgba(15, 84, 188, 1);
        }
        a:first-child {
          width: 133px;
          height: 42px;
          line-height: 42px;
          background: rgba(255, 255, 255, 1);
          opacity: 1;
          border-radius: 2px;
          display: block;
          border: 1px solid #ededed;
          margin-right: 10px;
          img {
            width: 14px;
            margin-right: 5px;
          }
        }
        a:last-child {
          display: block;
          width: 133px;
          height: 42px;
          background: rgba(15, 84, 188, 1);
          opacity: 1;
          border-radius: 2px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 42px;
          color: rgba(255, 255, 255, 1);
          opacity: 1;
        }
      }
    }
    .sectiona > p {
      b {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        margin-right: 5px;
      }
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 17px;
      color: rgba(153, 153, 153, 1);
      opacity: 1;
      margin: 10px 0;
    }
    .sectionb {
      .el-icon-location-information{
        margin-right: 5px;
      }
      .breadcrumb-box {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
      }
      h3 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        padding-left: 7px;
        margin: 20px 0;
      }
      p {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
        padding-left: 7px;
        margin-bottom: 15px;
      }
      p.last-p {
        padding-left: 0px;
        line-height: 24px;
      }
    }
    .sectionb > .sectiona_box {
      display: flex;
      margin: 20px 0;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      h2 {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 26px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        line-height: 30px;
      }
      .sectiona_btn {
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(15, 84, 188, 1);
        opacity: 1;
        a:first-child {
          font-size: 13px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 30px;
          color: rgba(15, 84, 188, 1);
          opacity: 1;
          width: 90px;
          height: 30px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(15, 84, 188, 1);
          opacity: 1;
          border-radius: 2px;
        }
      }
    }
    .sectionb .sectionb_title {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      span:first-child {
        display: block;
        width: 90px;
        padding-left: 5px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 21px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        border-left: 2px solid rgba(38, 163, 247, 1);
      }
      span:last-child {
        display: block;
        width: calc(100% - 100px);
        height: 2px;
        background: rgba(240, 240, 240, 1);
        margin-top: 9px;
      }
    }
  }
}
</style>
